<clr-wizard #wizard [(clrWizardOpen)]="isOpen" clrWizardSize="lg" [clrWizardPreventNavigation]="processing"
            [clrWizardClosable]="!processing" class="wizard">
  <clr-wizard-title>Create tasks</clr-wizard-title>
  <clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button>
  <clr-wizard-button [type]="'previous'">Back</clr-wizard-button>
  <clr-wizard-button [type]="'next'">Next</clr-wizard-button>
  <clr-wizard-button [type]="'finish'">Create tasks</clr-wizard-button>
  <clr-wizard-page>
    <ng-template clrPageTitle>Names</ng-template>
    <form clrForm #formNames="ngForm">
      <clr-input-container>
        <label class="clr-col-md-4">
          Names Pattern
        </label>
        <input clrInput required [(ngModel)]="model.names.value" class="clr-col-md-8 clr-col-12"
               name="namesValue" #namesValue="ngModel">
      </clr-input-container>

      <clr-select-container>
        <label class="clr-col-md-4">
          Min characters
        </label>
        <select clrSelect [(ngModel)]="model.names.min" class="clr-col-md-8 clr-col-12"
                name="namesMin" #namesMin="ngModel">
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="200">200</option>
        </select>
      </clr-select-container>
      <clr-select-container>
        <label class="clr-col-md-4">
          Max characters
        </label>
        <select clrSelect [(ngModel)]="model.names.max" class="clr-col-md-8 clr-col-12"
                name="namesMax" #namesMax="ngModel">
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="200">200</option>
        </select>
      </clr-select-container>
    </form>
  </clr-wizard-page>

  <clr-wizard-page>
    <ng-template clrPageTitle>Descriptions</ng-template>
    <form clrForm #formDescriptions="ngForm">
      <clr-select-container>
        <label class="clr-col-md-4">
          Min characters
        </label>
        <select clrSelect [(ngModel)]="model.descriptions.min" class="clr-col-md-8 clr-col-12"
                name="descriptionsMin" #descriptionsMin="ngModel">
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="200">200</option>
        </select>
      </clr-select-container>
      <clr-select-container>
        <label class="clr-col-md-4">
          Max characters
        </label>
        <select clrSelect [(ngModel)]="model.descriptions.max" class="clr-col-md-8 clr-col-12"
                name="descriptionsMax" #descriptionsMax="ngModel">
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="200">200</option>
        </select>
      </clr-select-container>
    </form>
  </clr-wizard-page>

  <clr-wizard-page>
    <ng-template clrPageTitle>DSL</ng-template>

    <form clrForm #formDescriptions="ngForm">
            <clr-select-container>
              <label class="clr-col-md-2">
                &nbsp;
              </label>
              <select clrSelect (change)="loadDsl()" [(ngModel)]="predefineDsl" class="clr-col-md-8 clr-col-12"
                      name="dslSamples" #dslSamples="ngModel">
                <option value="">Predefine DSL</option>
                <option value="1">Simple (timestamp)</option>
                <option value="2">Simple Batch (timestamp-batch)</option>
              </select>
            </clr-select-container>
      <clr-textarea-container>
        <label class="clr-col-md-2">
          Definition
        </label>
        <textarea [(ngModel)]="model.dsl.value" clrTextarea class="clr-col-md-10 clr-col-12"
                  name="dslValue" #dslValue="ngModel"></textarea>
      </clr-textarea-container>
    </form>
  </clr-wizard-page>

  <clr-wizard-page
    clrWizardPagePreventDefault="true"
    (clrWizardPageOnCommit)="submit()"
    (clrWizardPageOnCancel)="wizard.forceFinish()"
    (clrWizardPagePrevious)="wizard.previous()">
    <ng-template clrPageTitle>
      <span *ngIf="!processing">Options</span>
      <span *ngIf="processing">Processing</span>
    </ng-template>
    <form clrForm #formOptions="ngForm" *ngIf="!processing">
      <clr-select-container>
        <label class="clr-col-md-4">
          Number of streams
        </label>
        <select clrSelect [(ngModel)]="model.options.count" class="clr-col-md-8 clr-col-12"
                name="optionsCount" #optionsCount="ngModel">
          <option value="20">20</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="200">200</option>
          <option value="500">500</option>
          <option value="1000">1000</option>
        </select>
      </clr-select-container>
      <clr-select-container>
        <label class="clr-col-md-4">
          Delay
        </label>
        <select clrSelect [(ngModel)]="model.options.delay" class="clr-col-md-8 clr-col-12"
                name="optionsDelay" #optionsDelay="ngModel">
          <option value="0">No break</option>
          <option value="1">1s</option>
          <option value="2">2s</option>
          <option value="10">10s</option>
        </select>
      </clr-select-container>
      <clr-checkbox-container>
        <label class="clr-col-md-4">
          Launch tasks
        </label>
        <clr-checkbox-wrapper>
          <input [(ngModel)]="model.options.launch" type="checkbox" clrCheckbox name="optionsDeploy"
                 class="clr-col-md-8 clr-col-12"/>
        </clr-checkbox-wrapper>
      </clr-checkbox-container>
    </form>
    <ng-container *ngIf="processing">
      <p>{{step}}/{{model.options.count}} - Processing...</p>
      <div class="progress labeled">
        <progress [value]="progress" max="100" [attr.data-displayval]="progress + '%'"></progress>
      </div>
    </ng-container>

  </clr-wizard-page>
</clr-wizard>
